<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>文档列表 - 网址推荐</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">



</head>
  
<body>
<div class="lyear-layout-web" id="vue">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">
       
      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <a href="/"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
      </div>
      <div class="lyear-layout-sidebar-scroll">
        
        <nav class="sidebar-main">
          <ul class="nav nav-drawer">
              <li class="nav-item" v-for="(item,index) in menus"> <a :href="item.href"><i :class="item.icon"></i> {{item.name}}</a> </li>
          </ul>
        </nav>
		
        <div class="sidebar-footer">
          <p class="copyright">Copyright &copy; 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
        </div>
      </div>
      
    </aside>
    <!--End 左侧导航-->
    
    <!--头部信息-->
    <header class="lyear-layout-header">
      
      <nav class="navbar navbar-default">
        <div class="topbar">
          
          <div class="topbar-left">
            <div class="lyear-aside-toggler">
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
            </div>
            <span class="navbar-page-title"> 网址管理 </span>
          </div>
          
          <ul class="topbar-right">
            <li class="dropdown dropdown-profile">
              <a href="javascript:void(0)" data-toggle="dropdown">
                <img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="笔下光年" />
                <span>笔下光年 <span class="caret"></span></span>
              </a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                <li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                <li class="divider"></li>
                <li> <a href="backend_selfLogin.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
              </ul>
            </li>
          </ul>
          
        </div>
      </nav>
      
    </header>
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-toolbar clearfix">
                
                <div class="toolbar-btn-action">
                  <button class="btn btn-primary m-r-5" @click="clickAdd()">
                  <i class="mdi mdi-plus">新增</i>
                  </button>
                </div>
                  <div class="col-lg-6" >
                      <div class="input-group">
                          <input type="text" v-model="website.description" class="form-control" placeholder="输入内容" @keydown.enter="listWebsite()">
                          <span class="input-group-btn">
                            <button class="btn btn-default" type="button" @click="clickClean()">清空</button>
                            <button class="btn btn-default" type="button" @click="listWebsite()">搜索</button>
                          </span>
                      </div>
                  </div>
				
              </div>
              <div class="card-body">
                
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th class="col-xs-1">网址名称</th>
						<th class="col-xs-1">网址状态</th>
						<!-- <th class="col-xs-1">是否公开</th> -->
                        <th class="col-xs-1">网址类型</th>
                        <th class="col-xs-4">网址描述</th>
                        <th class="col-xs-2">网址图片</th>
                        <th class="col-xs-2">操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item,index) in list">
                        <td>{{item.name}}</td>
                        <td>{{item.status}}</td>
						<!-- <td>{{item.ishow}}</td> -->
						<td>{{item.type}}</td>
                        <td>{{item.description}}</td>
						<td>
							<ul v-if="item.imginfo != null" class="list-inline clearfix lyear-uploads-pic">
							  <li class="col-xs-4 col-sm-3 col-md-2">
							    <figure>
							      <img :src="item.imginfo" alt="图片">
							    </figure>
							  </li>
							</ul>
						</td>
                        <td>
                          <div class="btn-group">
                            <a class="btn btn-xs btn-default" @click="clickEdit(item)" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                            <a class="btn btn-xs btn-default" @click="clickDel(item)" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
							<a class="btn btn-xs btn-default" @click="changeStatus(item)" title="禁用" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
							<a class="btn btn-xs btn-default" @click="changeIshow(item)" title="启用" data-toggle="tooltip"><i class="mdi mdi-eye-outline"></i></a>
                          </div>
                        </td>
                      </tr>
                      
                    </tbody>
                  </table>
                </div>
                
       
              </div>
			  
			  
			  
			  <el-pagination
				@size-change="changeSize"
				@current-change="changePage"
				:current-page="param.page"
				:page-sizes="[10, 20, 50, 100]"
				:page-size="param.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="param.total">
			  </el-pagination>
			  
            </div>
          </div>
          
        </div>
        
      </div>
      
    </main>
    <!--End 页面主要内容-->
	
	<!-- 模态窗口 -->
	<button id="showModal" v-show="false" class="btn btn-primary m-r-5" type="button"  data-toggle="modal" data-target="#exampleModal" >打开</button>
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="exampleModalLabel">{{operateType}}</h4>
	      </div>
		  
	      <div class="modal-body">
			  
	          <div class="form-group">
	            <label for="recipient-name" class="control-label">网址名称：</label>
	            <input type="text" class="form-control"  v-model="website.name">
	          </div>
			  
			  <div class="form-group">
			    <label class="control-label" for="example-select">网址状态：</label>
			    <select class="form-control"  v-model="website.status"  >
			  		<option v-for="(item,index) in websiteStatus" :value="item.value" :label="item.label"></option>
			     </select>
			  </div>
			  
			  <!-- <div class="form-group">
			    <label class="control-label" for="example-select">是否公开：</label>
			    <select class="form-control"  v-model="website.ishow"  >
			  		<option v-for="(item,index) in isShow" :value="item.value" :label="item.label"></option>
			     </select>
			  </div> -->
			  <div class="form-group">
			    <label class="control-label" for="example-select">网址大类：</label>
			    <select class="form-control" v-model="category" @change="changeCategory">
			  		<option v-for="(item,index) in websiteCategory" :value="item.value" :label="item.label"></option>
			     </select>
			  </div>
			  <div class="form-group">
			    <label class="control-label" for="example-select">网址类型：</label>
			    <select class="form-control"  v-model="website.type"  >
				  <option v-for="(item,index) in websiteType" :value="item.value" :label="item.label"></option>
			     </select>
			  </div>
			  
			  <div class="form-group">
			    <label for="message-text" class="control-label">网址描述：</label>
			    <textarea class="form-control" v-model="website.description"></textarea>
			  </div>
			  
			  <div class="form-group">
			    <label for="recipient-name" class="control-label">网址链接：</label>
			    <input type="text" class="form-control"  v-model="website.link">
			  </div>
			  
			  <div class="form-group" >
			    <label for="recipient-name" class="control-label">网址图片：</label>
				<input id = "imgInfo" v-show="imgInfoStatus" type="text" class="form-control"  v-model="website.imginfo">
				
				<ul id="imgFile" v-show="imgInfoStatus" class="list-inline clearfix lyear-uploads-pic">
				  <li class="col-xs-4 col-sm-3 col-md-2">
				    <figure>
				      <img :src="website.imginfo" alt="图片">
				      <figcaption>
				        <a class="btn btn-round btn-square btn-primary" href="#!"><i class="mdi mdi-eye"></i></a>
				        <a class="btn btn-round btn-square btn-danger" href="#!"><i class="mdi mdi-delete"></i></a>
				      </figcaption>
				    </figure>
				  </li>
				</ul>
				
			    <input type="file" class="form-control" v-show="!imgInfoStatus" 
					  @change="imgChanged"
				      accept="image/*" >
			  </div>
			  
	          
			  
	      </div>
		  
	      <div class="modal-footer">
	        <button id="hiddenModal" v-show="false" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			<button type="button" class="btn btn-default" @click="clickClose()">关闭</button>
	        <button type="button" class="btn btn-primary" @click="clickEnter()">确定</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="bootstrap/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>

<!--消息提示-->
<script src="js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="js/lightyear.js"></script>

<script type="text/javascript" src="vue/vue.min.js"></script>
<script type="text/javascript" src="vue/vue_config.js"></script>
<script type="text/javascript" src="vue/axios.min.js"></script>
<script type="text/javascript" src="vue/vue_api.js"></script>
<script type="text/javascript" src="vue/commons.js"></script>

<link href="vue/element/index.css" rel="stylesheet">
<script type="text/javascript" src="vue/element/index.js"></script> 

<script type="text/javascript">
	new Vue({
		el: '#vue',
		data: {
		    menus:[],
			active:1,
			modal:{},
			showModal:{},
			hiddenModal:{},
			imgInfo:{},
			imgFile:{},
			
			operateType: "新增",
			imgInfoStatus: false,
			websiteCategory: [],
			category:"",
			websiteType: [],
			websiteStatus: [
				{"label":"有效","value":"有效"},
				{"label":"失效","value":"失效"},
			],
			isShow: [
				{"label":"公开","value":"公开"},
				{"label":"私有","value":"私有"},
			],
			param: {
				page: 1,
				size: 10
			},//查询使用
			website: {},//添加修改使用的内容
			
			list: [],
		},
		created(){
		    this.getMenusList();
			this.selectInfoWebsiteCategory();
			this.listWebsite();
		},
		mounted(){
			this.showModal = document.getElementById("showModal")
			this.hiddenModal = document.getElementById("hiddenModal")
			
			this.imgInfo = document.getElementById("imgInfo")
			this.imgFile = document.getElementById("imgFile")

            const exampleModal = document.getElementById("exampleModal");
            $(exampleModal).on('hide.bs.modal', this.onModalHide);
            //this.showModal.addEventListener('hide.bs.modal', this.onModalHide);
            //$(this.showModal).on('hide.bs.modal', this.onModalHide);
		},
		
		methods: {
            getMenusList(){
                var url = rootUrl+"sys/menus";
                fetchDataGet(url).then(res =>{
                    this.menus=res.list;
                })
            },
            clickClean(){
                this.website={};
                this.listWebsite();
            },

		    onModalHide(){
		        console.log("模态框隐藏")
                this.website = {};
            },

			changeSize(val){
				this.param.size = val;
				this.toPage();
			},
			changePage(val){
				this.param.page = val;
				this.toPage();
			},
			toPage(index){
				console.log(index)
				
				this.listWebsite();
			},
			clickAdd(){
				this.operateType="新增";
				this.imgInfoStatus=false;
				this.showModal.click();
			},
			clickEdit(row){
				this.operateType="编辑";
				if(row.imginfo!=null){
					this.imgInfoStatus=true;
				}else{
					this.imgInfoStatus=false;
				}
				
				//this.website = row
				this.selectInfoWebsiteOne(row.id)
				console.log("点击编辑",this.website)
				this.showModal.click();
			},
			clickCheck(){
				this.operateType="查看";
				this.showModal.click();
			},
			changeCategory(e){
				console.log("大类发生改变",e.target.value)
				this.selectInfoWebsiteType(e.target.value);
			},
			clickEnter(){
				if(this.operateType === "新增"){
					this.addWebsite();
				}
				if(this.operateType === "编辑"){
					this.updateWebsite();
				}
			},
			clickClose(){
				this.website = {};
				this.hiddenModal.click();
			},
			
			clickDel(row){
				this.delWebsite(row)
			},
			
			imgChanged(e){
				//上传图片，图片上传成功后，显示，显示后隐藏上传组件
				console.log("文件改变");
				// 获取选择的文件
				const file = e.target.files[0];
				  
				// 验证文件是否存在
				if (!file) {
					return;
				}
				  
				// 可选：验证文件类型和大小
				if (!this.validateFile(file)) {
					return;
				}
				  
				// 执行文件上传
				this.uploadFile(file);
				  
				// 清空输入框值，解决重复选择同一文件不触发change事件的问题
				e.target.value = '';
			},
			
			
			selectInfoWebsiteOne(id){
				//使用模板字符串
				var url =`${rootUrl}website/${id}`
				fetchDataGet(url).then(res =>{
					this.website = res.data;
				})
			},
			
			
			selectInfoWebsiteCategory(){
				var url = rootUrl+"websiteType/categorys/selectInfo";
				fetchDataGet(url).then(res =>{
					this.websiteCategory = res.list;
				})
			},
			
			selectInfoWebsiteType(value){
				var url = rootUrl+"websiteType/selectInfo";
				fetchDataPost(url,{"value":value}).then(res =>{
					this.websiteType = res.list;
				})
			},
			
			listWebsite(){
				var url = rootUrl+"website/list";
				fetchDataPostList(url,this.website,this.param).then(res =>{
					if(res.code === 200){
						this.list = res.list;
						this.param = res.metaInfo
						success(res.message);
					}else{
						danger(res.message);
					}
				})
			},
			addWebsite(){
				var url = rootUrl+"website/add";
				fetchDataPost(url,this.website).then(res =>{
					console.log(res)
					if(res.code === 200){
						success(res.message);
						this.hiddenModal.click();
						this.website = {};
						this.listWebsite();
					}else{
						danger(res.message);
					}
				})
			},
			updateWebsite(){
				var url = rootUrl+"website/update";
				fetchDataPost(url,this.website).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.hiddenModal.click();
						this.website = {};
						this.listWebsite();
					}else{
						danger(res.message);
					}
				})
			},
			delWebsite(website){
				var url = rootUrl+"website/del";
				fetchDataPost(url,website).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.listWebsite();
					}else{
						danger(res.message);
					}
				})
			},
			
			
			
			
			
			// 文件验证方法
			validateFile(file) {
			  // 验证文件类型（示例：只允许图片）
			  const isImage = file.type.startsWith('image/');
			  if (!isImage) {
				error('请选择图片文件');
				return false;
			  }
			  
			  // 验证文件大小（示例：不超过5MB）
			  const maxSize = 5 * 1024 * 1024; // 5MB
			  if (file.size > maxSize) {
				error('文件大小不能超过5MB');
				return false;
			  }
			  
			  return true;
			},
			
			// 文件上传方法
			uploadFile(file) {
			  // 创建FormData对象，用于表单数据提交
			  const formData = new FormData();
			  formData.append('file', file); // 'file'是后端接收文件的参数名
			  
			  // 显示加载状态
			  lightyear.loading('show');
			  
			  // 发送文件上传请求
			  var url = rootUrl+"website/uploadImg";
			  axios.post(url, formData, {
				headers: {
				  'Content-Type': 'multipart/form-data'  // 重要：设置正确的内容类型
				},
				onUploadProgress: (progressEvent) => {
				  // 可选：处理上传进度
				  const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
				  console.log(`上传进度：${percent}%`);
				}
			  })
			  .then(response => {
				// 隐藏加载状态
				lightyear.loading('hide');
				
				// 处理上传成功
				if (response.data.code === 200) {
				  
				  this.website.imginfo = response.data.data;
				  this.imgInfoStatus = true;
				  lightyear.notify('文件上传成功', 'success', 3000);
				  // 可以在这里更新图片状态，例如：
				  // this.imgInfoStatus = true;
				  // this.imgUrl = response.data.data.url;
				} else {
				  lightyear.notify('上传失败：' + response.data.message, 'error', 3000);
				}
			  })
			  .catch(error => {
				// 隐藏加载状态
				lightyear.loading('hide');
				console.error('上传出错：', error);
				lightyear.notify('上传失败，请重试', 'danger', 3000);
			  });
			}
			
		},
	})
</script>
</body>
</html>